<template>
	<u-popup :show="show" @close="show = false" mode="bottom" :round="10">

		<view @touchmove.prevent.stop class="popup-common">
			<view class="title">请选择自提点</view>
			<scroll-view scroll-y="true" class="h-[70vh]">
				<view class="p-[var(--popup-sidebar-m)] pt-0 text-sm">
					<view
						class="mt-[var(--top-m)] border-1 border-[#eee] border-solid rounded-[var(--rounded-mid)] px-[var(--pad-sidebar-m)] py-[var(--pad-top-m)] mb-[var(--top-m)]"
						:class="{ '!border-primary bg-[var(--primary-color-light2)]': store && store.id == item.id }"
						v-for="item in storeList" @click="selectStore(item)">
						<view class="flex">
							<view class="flex-1 w-0">
								<text class="text-[30rpx] text-[#333]">{{ item.name }}</text>
								<text class="text-[26rpx] ml-[12rpx] text-[var(--text-color-light6)]">{{ item.phone }}</text>
							</view>
							<view v-if="item.distance">
								<text class="text-red text-[26rpx] font-normal">{{ distanceFormat(item.distance) }}</text>
							</view>
						</view>
						<view class="mt-[20rpx] text-[26rpx] leading-[1.4] flex">
							<text class="flex-shrink-0">门店地址：</text>
							<text>{{ item.detailAddress }}</text>
						</view>
						<!-- <view class="mt-[16rpx] text-[26rpx]">营业时间：{{ item.trade_time }}</view> -->
					</view>
				</view>
				<view class="h-[70vh] flex items-center flex-col justify-center" v-if="loading">
					<u-loading-icon :vertical="true"></u-loading-icon>
				</view>
				<view class="h-[95%] flex items-center flex-col justify-center" v-if="!loading && !storeList.length">
					<u-empty text="没有可选择的自提点" :icon="img('static/resource/images/empty.png')" />
				</view>
			</scroll-view>
			<view class="btn-wrap">
				<button class="primary-btn-bg btn" @click="confirm">确认</button>
			</view>
		</view>
	</u-popup>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { getStoreList } from '@/addon/shop/api/order'
import { img } from '@/utils/common'

const show = ref(false)
const loaded = ref(false)
const loading = ref(true)
const storeList = ref<object[]>([])
const store = ref<null | object>(null)

const latlng = reactive({
	lat: 0,
	lng: 0
})

const getStoreListFn = (callback: any) => {
	if (!loaded.value) {
		loaded.value = true

		if (uni.getStorageSync('location_address')) {
			let location_address = uni.getStorageSync('location_address');
			latlng.lat = location_address.latitude;
			latlng.lng = location_address.longitude;
		} else {
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					latlng.lat = res.latitude
					latlng.lng = res.longitude
				},
				fail: (res) => {
					if (res.errno) {
						if (res.errno == 104) {
							let msg = '用户未授权隐私权限，获取位置失败';
							uni.showToast({ title: msg, icon: 'none' })
						} else if (res.errno == 112) {
							let msg = '隐私协议中未声明，获取位置失败';
							uni.showToast({ title: msg, icon: 'none' })
						}
					}
					if (res.errMsg) {
						if (res.errMsg.indexOf('getLocation:fail') != -1 || res.errMsg.indexOf('deny') != -1 || res.errMsg.indexOf('denied') != -1) {
							let msg = '用户未授权获取位置权限，将无法提供距离最近的门店';
							uni.showToast({ title: msg, icon: 'none' })
						} else {
							uni.showToast({ title: res.errMsg, icon: 'none' })
						}
					}
				}
			});
		}

		setTimeout(() => {
			getStoreList({ latlng }).then(({ data }) => {
				storeList.value = data
				if (typeof callback == 'function') {
					callback(data);
				}
				loading.value = false
			}).catch(() => {
				loading.value = false
			})
		}, 1500)
	}
}

const open = () => {
	show.value = true
}

const selectStore = (data: object) => {
	if (store.value) {
		store.value = store.value.id != data.id ? data : null
	} else {
		store.value = data
	}
}

const emits = defineEmits(['confirm'])

const confirm = () => {
	emits('confirm', store.value)
	show.value = false
}

const distanceFormat = (distance: any) => {
	distance = parseFloat(distance)
	if (distance < 1000) {
		return `${distance}m`;
	} else {
		const km = (distance / 1000).toFixed(2)
		return `${km}km`;
	}
}

defineExpose({
	open,
	getData: getStoreListFn
})
</script>

<style lang="scss" scoped></style>
